<template>
	<view class="home-container">
		<view :class="{'header-container': true, 'isFixed': homeData.isScorllFlag}">
			<view :style="{height: homeData.statusBarHeight + 'px' }"></view>
			<view class="h-title" :style="{height: homeData.navHeight + 'px'}">
				<tm-icon fontSize="32" name="iconfont icon-zukeduan-xiangmu" color="#4A76F7"></tm-icon>
				<text class="tit">{{userInfo.community_name}}</text>
			</view>
		</view>
		
		<view class="home-cotent">
			<block v-for="(item, i) in homeData.homeList" :key="i">
				<!-- 公告 -->
				<view class="notice mw10" v-if="item.mark == 'home_notice'" @click="handleGoBotice">
					<image class="img notice-left-image" src="@/static/img/home-notice.png" mode="aspectFit"></image>
				    <view class="notice-main" >
						<swiper autoplay vertical style="height:20px" v-if="homeData.notice.length > 0">
						    <swiper-item v-for="(item, i) in homeData.notice" :key="i">
								<view style="display:flex;align-items:center;justify-content:space-between">
								<view style="flex:1;text-overflow:ellipsis;overflow: hidden;font-size: 28rpx;color: #8091A4;">{{ item.title}}</view>
								<view style="width:6px;height:6px;border-radius:50%;background:#EE4646;margin-right:5px" v-if="item.is_read != 1 "></view>
								</view>
						    </swiper-item>
						</swiper>
					    <text v-else style="font-size: 28rpx;color: #8091A4;">暂无公告</text>
				    </view>
				    <view style="display:flex;align-items:center">
					    <image class="notice-right-image" :src="getImgUrl('/applet_assets/safe_closed/right.png')" lazy-load="true" mode="scaleToFill" />
				     </view>
				</view>
			
				<!-- 首页三大件 -->
				<view class="hold-all_header" v-if="item.mark == 'home_third_module'">
					<tm-image class="hold_all_header_left_image" :round="2" :width="346" :height="274" :src="getImgUrl('/' + homeData.onemodule.menu_url)"></tm-image>
					<view class="hold_all_header_right_images">
						<tm-image :width="346" :round="2" class="image" :height="128" :src="getImgUrl('/' + homeData.towmodule.menu_url)"></tm-image>
						<view style="height: 18rpx;"></view>
						<tm-image :width="346" :round="2" class="image" :height="128" :src="getImgUrl('/' + homeData.threemodule.menu_url)"></tm-image>
					</view>
				</view>
				
				<!-- 工具 -->
				<view class="hold-all_main" v-if="item.mark == null || item.mark == '' || item.mark == undefined">
					<icon-section :iconList="item.menu_list"></icon-section>
				</view>
				
				<!-- banner图 -->
				<view class="banner" v-if="item.mark == 'banner'">
					 <swiper autoplay indicator-dots="true" :interval="homeData.interval * 1000" indicator-color="#D6D6D6" indicator-active-color="#FFF">
						  <swiper-item v-for="(ele, i) in homeData.bannerList" :key="i">
							<image style="border-radius: 5px;width:100%;margin:0 auto" :src="ele.url" lazy-load="true" mode="widthFix" />
						  </swiper-item>
					  </swiper>
				</view>
				
				<!-- 物业通知 -->
				<view class="tenement-notice" v-if="item.mark == 'notice'">
					<new-list-image :listArr="homeData.tenementNotice" headTitle="物业通知" :isShowMore="true"></new-list-image>
				</view>
			</block>
		</view>
		<tabbar :currentVal="0"></tabbar>
	</view>
</template>

<script setup lang="ts">
	import { reactive } from 'vue';
	import { onPageScroll } from '@dcloudio/uni-app'
	import tabbar from '@/components/tab-bar/tab-bar.vue';
	import {getService, getMessageList, getBannerList, getIntervalTime, getWNoticeList} from '@/api_request/api';
    import {ASSETS_HOST} from '@/config';
	import { useInfoStore } from '@/store/userInfo';
	import { storeToRefs } from 'pinia';
	import tmImage from '@/tmui/components/tm-image/tm-image.vue';
	import tmCarousel from '@/tmui/components/tm-carousel/tm-carousel.vue';
	import tmIcon from '@/tmui/components/tm-icon/tm-icon.vue';
	
	const userStore = useInfoStore()
	const {userInfo} = storeToRefs(userStore)
	const homeData = reactive({
		height: 0,
		statusBarHeight: 48, //自定义的顶部栏高度
		navHeight: 44,
		homeList: [], // 获取页面所有数据
		notice: [], // 公告
		onemodule:{},
		towmodule:{},
		threemodule:{},
		bannerList: [],
		interval: 0,
		tenementNotice: [],
		isScorllFlag: false // 是否滚动
	})
	
	//  滚动事件
	onPageScroll((e:any) =>{
		if(e.scrollTop > 0) {
			homeData.isScorllFlag = true
		}else {
			homeData.isScorllFlag = false
		}
	})
	// 获取页面数据
	const getData = async ()=> {
		const {data, code, message} = await getService({menu_nav: 'home'})
		if(code == 200) {
			homeData.homeList = data;
			homeData.homeList.forEach((item:any) => {
				if(item.mark == 'home_third_module') {
					item.menu_list.forEach((val:any) => {
						if (val.mark == 'A1') {
							homeData.onemodule = val
						} else if (val.mark == 'A2') {
							homeData.towmodule = val
						} else if (val.mark == 'A3') {
							homeData.threemodule = val
						}
					})
				}
			})
		}else {
			uni.$showMsg(message)
		}
	}
	// 公告
	// 获取公告list
	const getNoticeList = async () => {
		const {data, code, message} = await getMessageList({community_id: userInfo.value.community_id, page_num:1,page_size: 5,})
		if(code == 200) {
			homeData.notice = data.list
		}else {
			uni.$showMsg(message)
		}
	}
	// 公告点击跳转
	const handleGoBotice = () => {
		uni.navigateTo({
			url: '/subpkg/systemNotice/index'
		})
	}
	
	// 首页三大件
	const getMenus = async () => {
		const {data, code, message} = await getService({menu_nav: 'home'})
		if(code == 200) {
			homeData.homeList = data;
		}else {
			uni.$showMsg(message)
		}
	}
	// banner 
	const getBanner = async ()=> {
		const {data, code, message} = await getBannerList()
		if(code == 200) {
			homeData.bannerList = data.map((item:any) => {
				return {
					...item,
					url: `${ASSETS_HOST}${item.url}`
				}
			})
			getIntervalTimes()
		}else {
			uni.$showMsg(message)
		}
	}
	
	const getIntervalTimes = async ()=> {
		const {data, code, message} = await getIntervalTime()
		if(code == 200) {
			homeData.interval = data.interval	
		}else {
			uni.$showMsg(message)
		}
	}
	
	//  物业通知列表
	const getWuNoticeList = async ()=> {
		const {data, code, message} = await getWNoticeList({page_num: 1, page_size: 4, community_id: userInfo.value.community_id,merchant_id: userInfo.value.merchant_id})
		if(code == 200) {
			homeData.tenementNotice = data.list.map((item: any) => {
				return {
					...item,
					projectName: item.notice_community.map((ele:any)=> ele.name).join(',')
				}
			})
		}else {
			uni.$showMsg(message)
		}
	}
	
	// 获取图片路径
	const getImgUrl = (url:string) => {
		return ASSETS_HOST + url
	}
	
	const setSystem = ()=> {
		const { statusBarHeight, windowWidth, system } = wx.getSystemInfoSync();
		const isiOS = system.indexOf("iOS") > -1;
		let navHeight;
		if (!isiOS) {
			navHeight = 48;
		} else {
			navHeight = 44;
		}
		homeData.navHeight = navHeight;
		homeData.statusBarHeight = statusBarHeight;
		homeData.height = homeData.navHeight + homeData.statusBarHeight;
	}
	getData()
	setSystem()
	getBanner()
	getNoticeList()
	getWuNoticeList()
</script>

<style lang="scss" scoped>
.home-container {
	width: 100%;
	padding: 0 0 270rpx 0;
	box-sizing: border-box;
	background-color: $uni-bg-color-page;
	.header-container {
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
		
		.h-title {
			display: flex;
			align-items: center;
			padding-left: 20rpx;
			box-sizing: border-box;
			
			.tit {
				line-height: 34rpx;
				font-size: 34rpx;
				font-weight: $cus-font-weight;
				margin-left: 10rpx;

			}
		}
	}
	
	.header-container.isFixed {
		position: fixed;
		top: 0;
		z-index: 10;
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.08);
	}
	
	.home-cotent {
		padding: 36rpx 20rpx 0;
		box-sizing: border-box;
		
		.notice {
			height: 100rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(0,0,0,0.05);
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;
			box-sizing: border-box;
			
			.notice-left-image {
				width: 76rpx;
				height: 40rpx;
			}
			
			.notice-right-image {
				width: 5px;
				height: 10px;
			}
			
			.notice-main {
				padding:0 14px;
				flex: 1;
				overflow:hidden;
				text-overflow:ellipsis;
				white-space:nowrap;
			}
		}
		
		.hold-all_header { 
			display: flex;
			align-items:center;
			margin-top: 42rpx;
			
			.hold_all_header_left_image { 
				// width: 346rpx;
				margin-right: 18rpx;
				height:auto; 
			}
		}
		
		.hold-all_main {
			margin-top: 22rpx;
		}
		
		.banner {
			background: #FFF;
			width: 100%;
			margin-top: 24rpx;
			image { 
				width: 100%; 
			}
			swiper { 
				max-height:200rpx;
				border-radius:10rpx;
				overflow: hidden; 
			}
		}
		
		.tenement-notice {
			margin-top: 40rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
		}
	}
}
</style>
